<template>
  <div :class="isSingleRow?'isSingleRow':''" class="form-box my-transition">
    <!--通用表单form, 搜索区域表单，模态框表单, 响应式布局 -->
    <el-form
      :label-position="labelPosition"
      :model="form"
      ref="form"
      :rules="rules"
      :label-width="labelWidth">
      <!--单行（一般搜索区域表单）-->
      <el-row v-if="isSingleRow" :gutter="10" style="overflow: hidden">
        <!-- 内容item匿名插槽 -->
        <slot></slot>
        <!--内容item具名插槽(收起状态将被隐藏)-->
        <slot name="hidden" v-if="isToggle&&toggleStatus===0"></slot>
        <el-col style="width: 186px;height: 50px"><slot name="button"></slot></el-col>
        <!-- 收起/展开 span -->
        <el-col style="width: 80px;height: 32px" v-if="isToggle" class="toggleSpan"  >
          <a @click="toggleStatus=(toggleStatus===0?1:0)" style="margin-left: 8px">
            {{ toggleStatus===0 ? '收起' : '展开' }}
            <a-icon :type="toggleStatus==0 ? 'up' : 'down'"/>
          </a>
        </el-col>
      </el-row>
      <!--多行（一般模态框表单）-->
      <div v-else class="multipleRow">
        <el-row :gutter="10">
          <slot></slot>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'FormBox',

    props: {
      value: {
        type: Object,
        default: {}
      },
      labelPosition: {
        type: String,
        default: 'left'
      },
      labelWidth: {
        type: String,
        default: 'auto'
      },
      isToggle: {
        type: Boolean,
        default: false
      },
      rules: {
        type: Object,
        default: ()=>{}
      },
      isSingleRow: {
        type: Boolean,
        default: false
      }
    },
    created() {
      // 组件创建时候 将父组件value 传给 form
      this.form = this.value
    },
    watch:{
      value(val) {
        // 监听 父组件value, 动态赋值给 form
        this.form = val
      },
      form(val) {
        // 监听 fileList, 使用$emit 将消息提交给父组件
        this.$emit('input', val)
      }
    },
    data() {
      return {
        form: {},
        toggleStatus: 1,
      }
    },

    methods: {
      // 通过refs调用el-form的validate函数
      validate(callback) {
        this.$refs.form.validate((valid)=>{
          callback(valid)
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/styles/variables.scss';
  .form-box {
    margin-bottom: 8px;
    .toggleSpan {
      color: $primary;
      margin-top: 6px;
    }
  }
  // 修复isSingleRow时，样式错乱问题
  .isSingleRow {
    /deep/.el-form-item__content > button{
      position: relative;
    }
    /deep/.el-form-item__content > *{
      position: absolute;
    }
  }
</style>
